<!-- eslint-disable vue/html-self-closing -->
<template>
  <div id="Home">
    <div class="loginPanel">
      <div class="logo">
        <img src="../../assets/login_images/junctai-removebg.png" alt="" />
      </div>
      <!-- <svg
        version="1.0"
        xmlns="http://www.w3.org/2000/svg"
        width="30%"
        height="30%"
        viewBox="0 0 400.000000 400.000000"
        preserveAspectRatio="xMidYMid meet"
      >
        <metadata>
          Created by potrace 1.11, written by Peter Selinger 2001-2013
        </metadata>
        <g
          transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)"
          fill="#fff"
          stroke="none"
        >
          <path
            d="M1907 3424 c-1 -1 -31 -4 -67 -8 -36 -3 -76 -9 -90 -12 -14 -3 -32
-7 -40 -8 -71 -12 -229 -66 -325 -111 -92 -44 -245 -139 -245 -152 0 -4 13
-21 30 -38 l30 -31 -48 -36 c-50 -39 -149 -139 -195 -198 l-27 -35 -30 33
c-17 17 -33 32 -36 32 -11 0 -120 -179 -159 -263 -89 -191 -129 -372 -129
-592 0 -183 5 -228 50 -393 40 -148 117 -311 208 -440 l30 -42 33 32 34 33 42
-50 c52 -62 129 -139 185 -185 l42 -34 -32 -34 c-19 -19 -29 -36 -23 -40 102
-73 227 -143 328 -183 69 -28 199 -67 245 -74 20 -3 62 -10 92 -15 84 -14 382
-5 470 14 113 25 255 74 345 119 90 45 235 135 235 146 0 4 -11 18 -25 31 -31
29 -31 43 -1 64 33 21 164 151 203 201 l32 40 32 -32 32 -31 23 28 c62 73 192
329 208 408 1 9 6 24 9 32 11 31 36 147 44 205 13 100 8 342 -10 441 -33 183
-108 371 -213 532 l-55 85 -34 -33 -34 -33 -28 34 c-54 66 -148 161 -195 197
l-48 36 30 31 c17 17 30 34 30 38 0 13 -166 116 -252 156 -109 51 -231 90
-358 116 -70 14 -331 29 -343 19z m313 -108 c169 -33 341 -98 471 -179 19 -12
50 -31 67 -42 18 -10 32 -23 32 -29 0 -5 -13 -22 -30 -38 -16 -15 -30 -32 -30
-36 0 -4 25 -27 56 -52 31 -25 84 -76 118 -115 98 -111 93 -101 61 -135 l-28
-29 40 -63 c118 -189 169 -373 167 -613 -2 -219 -45 -377 -154 -569 l-51 -89
27 -28 27 -28 -39 -48 c-47 -58 -124 -135 -184 -185 l-45 -36 33 -34 c17 -19
32 -37 32 -41 0 -18 -213 -139 -315 -178 -61 -24 -160 -52 -235 -65 -97 -18
-323 -25 -402 -13 -29 5 -70 11 -92 14 -21 4 -50 11 -65 16 -14 6 -27 10 -29
9 -9 -5 -156 48 -225 82 -91 45 -217 123 -217 136 0 4 16 23 35 42 32 31 36
32 52 18 67 -60 322 -174 428 -192 17 -3 46 -8 65 -11 189 -34 400 -20 585 40
95 30 270 116 315 153 l31 27 -28 27 -28 26 -82 -49 c-81 -49 -274 -129 -312
-129 -11 0 -30 -4 -43 -9 -51 -19 -299 -31 -364 -17 -12 2 -37 7 -55 10 -74
13 -97 18 -165 41 -91 31 -185 74 -254 119 l-55 35 -26 -25 c-14 -13 -29 -24
-34 -24 -22 0 -159 127 -229 213 l-39 48 27 28 27 28 -51 89 c-73 129 -107
221 -145 399 -14 61 -13 280 1 355 22 121 24 130 48 199 31 87 61 152 109 230
l38 64 -27 28 -27 28 28 38 c34 46 171 182 212 211 l30 21 28 -29 c24 -26 31
-28 44 -17 9 8 48 32 86 53 220 125 469 172 719 137 176 -24 311 -74 478 -175
l37 -23 25 24 c14 14 26 27 26 31 0 5 -14 15 -99 67 -57 36 -155 80 -234 107
-65 22 -106 32 -217 52 -19 3 -87 7 -150 9 -240 4 -487 -64 -672 -187 -31 -21
-62 -38 -68 -38 -15 0 -70 52 -70 65 0 24 235 152 355 194 63 21 163 46 230
57 22 3 42 7 44 9 6 6 344 -2 381 -9z m-1269 -679 c-82 -136 -134 -274 -165
-437 -15 -76 -16 -326 -2 -400 34 -179 114 -381 193 -486 13 -17 23 -35 23
-40 -1 -18 -59 -66 -73 -61 -17 6 -105 149 -137 222 -12 28 -26 59 -31 70 -56
125 -99 366 -93 520 4 84 14 197 19 206 3 4 7 24 11 45 21 136 141 406 218
492 l20 23 34 -35 35 -34 -52 -85z m2176 71 c83 -132 158 -313 177 -428 3 -19
8 -46 11 -60 18 -90 24 -263 11 -373 -21 -185 -82 -366 -183 -535 -69 -119
-69 -119 -109 -76 -19 19 -34 37 -34 39 0 3 19 35 43 72 89 139 145 288 175
467 14 84 7 338 -11 426 -33 150 -104 326 -173 423 -19 26 -34 50 -34 54 0 8
62 73 70 73 3 0 29 -37 57 -82z"
          />
          <path
            d="M1637 2692 l-77 -77 134 -134 c157 -156 166 -176 142 -288 -8 -33
-28 -43 -103 -48 -56 -3 -104 29 -232 159 l-125 127 -76 -76 -77 -76 136 -136
c154 -154 184 -177 259 -196 l53 -13 -166 -166 c-91 -92 -165 -170 -165 -175
0 -10 234 -243 245 -243 4 0 82 75 174 166 l165 166 12 -46 c20 -76 56 -125
198 -266 75 -74 139 -137 141 -139 3 -2 38 30 80 71 l74 76 -135 135 c-150
151 -166 177 -152 261 11 71 32 83 133 76 48 -3 72 -21 210 -154 72 -69 135
-126 140 -126 6 0 43 33 82 73 l70 74 -46 43 c-25 24 -95 90 -154 147 -108
104 -164 140 -236 152 l-33 6 170 170 171 170 -126 127 -127 127 -167 -168
c-92 -93 -170 -166 -173 -163 -3 3 -6 15 -6 27 0 52 -54 127 -194 269 l-143
144 -76 -76z m308 -277 c21 -37 27 -57 39 -127 5 -29 -9 -49 -45 -68 -17 -10
-19 -7 -19 37 0 93 -14 116 -135 241 l-114 117 21 23 22 23 104 -103 c57 -57
114 -121 127 -143z m300 -104 c-107 -106 -198 -191 -201 -189 -2 3 0 25 5 48
8 38 31 65 177 211 l168 168 24 -22 23 -22 -196 -194z m128 -73 c-150 -150
-172 -168 -212 -177 -25 -5 -48 -8 -50 -5 -2 2 83 92 189 199 l194 195 23 -22
24 -22 -168 -168z m-883 -27 c121 -121 165 -146 244 -139 25 2 46 2 46 0 0 -2
-8 -17 -17 -32 -20 -35 -50 -41 -118 -22 -66 19 -91 37 -214 159 l-103 103 23
20 c13 10 25 19 26 20 1 0 52 -49 113 -109z m465 -108 c-9 -21 -20 -42 -25
-47 -11 -11 -82 -37 -77 -27 2 3 9 21 16 39 8 20 27 40 50 52 50 27 53 25 36
-17z m438 -143 c23 -11 95 -71 160 -133 l118 -113 -24 -22 -24 -22 -112 107
c-129 123 -177 152 -257 150 -30 -1 -54 0 -54 3 0 8 32 54 42 61 15 10 107 -9
151 -31z m-280 -25 c-16 -34 -93 -89 -93 -67 0 38 26 75 64 92 22 9 42 16 44
15 2 -1 -5 -19 -15 -40z m-249 3 c-2 -7 -89 -98 -192 -201 l-188 -188 -22 23
-21 24 168 168 c170 170 173 172 253 185 4 0 5 -5 2 -11z m69 -104 c-5 -38
-21 -57 -177 -213 l-172 -172 -22 24 -22 23 195 194 c107 106 197 191 199 189
3 -2 2 -23 -1 -45z m131 -97 c0 -84 19 -118 144 -243 111 -112 114 -115 97
-134 -10 -11 -22 -20 -26 -20 -17 0 -229 220 -248 258 -11 22 -23 61 -27 88
-3 27 -7 52 -8 55 -2 9 46 48 59 49 6 0 10 -24 9 -53z"
          />
        </g>
      </svg> -->
      <div class="number">
        <div class="loginLogo">
          <svg
            t="1617798195314"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2063"
            width="16"
            height="16"
          >
            <path
              d="M502.28224 338.432m-234.496 0a234.496 234.496 0 1 0 468.992 0 234.496 234.496 0 1 0-468.992 0Z"
              fill="#CAE4FF"
              p-id="2064"
            ></path>
            <path
              d="M492.288 609.792c-160.256-0.512-289.792-130.048-289.792-289.792 0-160.768 129.024-291.84 289.792-294.4 160.256 0.512 289.792 130.048 289.792 289.792 0.512 161.28-129.024 291.84-289.792 294.4z m0-500.224c-113.664 0-205.824 92.16-205.824 205.824 0 113.664 92.16 205.824 205.824 205.824s205.824-92.16 205.824-205.824c0-113.664-92.16-205.824-205.824-205.824z"
              fill="#0972E7"
              p-id="2065"
            ></path>
            <path
              d="M109.824 1013.248c-23.04 0-41.984-18.944-41.984-41.984v-16.896c1.024-236.544 192.512-427.52 428.544-428.544 23.04 0 41.984 18.944 41.984 41.984 0 23.04-18.944 41.984-41.984 41.984-189.952 1.024-343.552 154.624-344.576 344.576v12.8c0.512 24.064-17.92 44.032-41.984 46.08z"
              fill="#0972E7"
              p-id="2066"
            ></path>
            <path
              d="M874.752 1009.152c-22.016 1.536-40.448-15.36-41.984-37.376v-17.408c-1.024-189.952-154.624-343.552-344.576-344.576-23.04 0-41.984-18.944-41.984-41.984 0-23.04 18.944-41.984 41.984-41.984 236.544 1.024 427.52 192.512 428.544 428.544v12.8c1.536 22.016-15.36 40.448-37.376 41.984h-4.608z"
              fill="#0972E7"
              p-id="2067"
            ></path>
          </svg>
        </div>
        <div class="mui-input-row">
          <input
            v-model="loginForm.user"
            type="text"
            class="mui-input-clear"
            placeholder="登录账号"
          />
        </div>
      </div>
      <div class="password">
        <div class="loginLogo">
          <svg
            t="1617798249878"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4874"
            width="16"
            height="16"
          >
            <path
              d="M826.547856 388.599575h-29.288257v-103.168029a285.316915 285.316915 0 1 0-570.633829 0v103.168029h-29.230942A114.28725 114.28725 0 0 0 83.279525 502.714877v406.940558a114.28725 114.28725 0 0 0 114.115303 114.115303h629.153028a114.28725 114.28725 0 0 0 114.115303-114.115303v-406.940558a114.28725 114.28725 0 0 0-114.115303-114.115302zM306.810254 285.316915a205.075115 205.075115 0 1 1 410.15023 0v103.168028H306.810254z m553.553789 624.739729a33.930818 33.930818 0 0 1-33.873502 33.873503H197.394828a33.930818 33.930818 0 0 1-33.873503-34.102765v-406.940558a33.930818 33.930818 0 0 1 33.873503-33.873503h629.153028a33.930818 33.930818 0 0 1 33.873503 33.873503z"
              fill="#467CFD"
              p-id="4875"
            ></path>
            <path
              d="M512 553.66842a107.180119 107.180119 0 0 0-22.295757 212.067615v58.060674a22.467704 22.467704 0 1 0 44.935408 0v-56.16926-1.891414a107.180119 107.180119 0 0 0-22.295758-212.067615z m0 168.507781a61.327661 61.327661 0 1 1 61.327661-61.327662A61.384977 61.384977 0 0 1 512 722.176201z"
              fill="#8BAEF7"
              p-id="4876"
            ></path>
          </svg>
        </div>
        <div class="mui-input-row mui-password">
          <input
            v-model="loginForm.passwd"
            type="password"
            class="mui-input-password"
            placeholder="登陆密码"
          />
        </div>
      </div>
      <div class="login">
        <div>
          <button type="button" class="loginBtn" @click="login">
            登录/注册
          </button>
        </div>
        <div class="btn">
          <van-tabs v-model="active" @click.native="whoLogin">
            <van-tab title="用户登录"></van-tab>
            <van-tab disabled="flase" class="line" title="|"></van-tab>
            <van-tab title="管理登录"></van-tab>
          </van-tabs>

          <!-- <button>管理</button>
          <span>|</span>
          <button>用户</button> -->
        </div>
        <!-- <p @click="reg"><span style="border-bottom: 2px solid #FFFFFF;">还没有账号？ 去注册</span></p> -->
        <p
          style="color: rgb(96, 96, 94); font-size: 12px; font-weight: 500"
          @click="show"
        >
          忘记密码
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { Notify, Dialog } from 'vant'

export default {
  name: 'Login',
  data() {
    return {
      active: 0,
      loginForm: {
        user: 'Jhon',
        passwd: '123456'
      },
      who: ''
    }
  },
  methods: {
    show() {
      Dialog.alert({
        message: '你的账号是:Jhon   , 密码是  123456!'
      }).then(() => {
        // on close
      })
    },
    whoLogin() {
      console.log(111)
      if (this.active === 0) {
        this.who = 'user'
        this.$store.commit('who/SET_WHO', this.who)
        console.log(this.$store)
      } else {
        this.who = 'manager'
        this.$store.commit('who/SET_WHO', this.who)
        // alert(this.$store.state.who.who)
      }
    },
    login() {
      document.querySelector('.loginBtn').innerText = '登录中...'
      this.whoLogin()
      setTimeout(() => {
        if (
          this.loginForm.user === 'Jhon' &&
          this.loginForm.passwd === '123456'
        ) {
          // document.querySelector('.loginBtn').innerText = '登录成功...'
          Notify({ type: 'success', message: '登录成功' })
          console.log(this.who)
          if (this.who === 'user') {
            console.log('user')
            this.$router.push({
              name: '文献检索',
              params: {
                who: this.who
              }
            })
          } else {
            console.log('manager')
            this.$router.push({
              name: '备忘录',
              params: {
                who: this.who
              }
            })
          }

          // this.$router.push({ path: '/search' })
          //   this.$store.dispatch('user/login', this.loginForm)
          //     .then(() => {
          //       alert(111)
          //       Notify({ type: 'success', message: '登录成功' })
          //       this.$router.push({ path: '/search' })
          //     }).catch(() => {
          //       Notify({ type: 'success', message: '登录成功' })
          //     })
          // } else {
          //   console.log('error submit!!')
          //   Notify({ type: 'danger', message: '登录失败' })
          //   return false
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
#Home {
  background: url(../../assets/login_images/bg.jpg) no-repeat fixed center;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  height: 100vh;
  padding-top: 1%;
}
.txt {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgb(57, 141, 220);
}

.logo {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgb(57, 141, 220);
  margin-bottom: 15px;
}

.loginPanel {
  position: relative;
  left: 50%;
  width: 50%;
  bottom: -15vh;
  transform: translateX(-50%);
  box-shadow: 0 0 10px 5px rgb(226, 238, 254);
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  color: rgb(57, 141, 220);

  img {
    width: 80%;
  }
}

.password,
.number {
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 60%;
  margin-top: 20px;
}

.loginLogo {
  position: absolute;
  z-index: 1;
  transform: translate(80%, 55%);
}

.logo {
  width: 65%;
  margin-left: -8%;
  /* background-image: url(../../assets/login_images/junctai-removebg.png); */
}

.number > div:first-child,
.password > div:first-child {
  margin: 0 auto;
  font-weight: bold;
}

.mui-input-row {
  margin: 0 auto;
}

.number > div:last-child > input,
.password > div:last-child > input {
  padding: 10px 15px 10px 35px;
  background-color: none;
  border: 0;
  margin: 0 auto;
  border-radius: 20px;
  font-size: smaller;
}

.login {
  text-align: center;
  margin-top: 30px;
}

.login .btn {
  margin-top: 10%;
  margin: 0 auto;
  width: 40%;
}

.login button {
  width: 20%;
  padding: 8px 5px;
  border-radius: 30px;
  background-color: rgb(57, 141, 220);
  color: white;
}

.login button:active {
  background-color: lightskyblue;
}

.login p {
  margin: 0;
  padding-top: 20px;
  font-weight: bold;
  color: rgb(57, 141, 220);
}

@media only screen and (max-width: 600px) {
  .loginPanel {
    width: 70%;
    background-color: white;
  }

  .password,
  .number {
    position: relative;
    margin: 0 auto;
    width: 100%;
    margin-top: 20px;
  }

  .login button {
    width: 50%;
  }

  .login p {
    color: rgb(57, 141, 220);
  }

  .login .btn {
    width: 100%;
    font-size: 10px;
  }
}
</style>
